<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Creating sequential maps/logs along Interstates</title>
    <script
      src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALTdx9qjrdl_2yO4uD4jnWxQ_6N4dkHg7_wIKENxVG1go3UnpWxRwWZP6VSh5aDY53HnYXQe1FQQEGw" type="text/javascript"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body onunload="GUnload()">
    <center>
      <h2>A utility for creating sequential maps/logs along Interstates.</h2>
    </center>

    <table>
      <tr><td> 
      <p>First, either <strong>drag the pushpin</strong> to its desired location,
          or <strong>reposition the map</strong> by dragging it around or panning with arrow
          buttons on the map. Then you may be able to <strong>zoom in the map</strong> by clicking the "+" button or by double
          clicking on the map near where you want the map center to be, or you may have to <strong>zoom out the map</strong> by clicking the "-" button. If need be, you can reposition the pushpin and the
          map, and zoom the map, in <font color="blue">repeated cycles</font> until you get the result
          you desire.
          </p>
          <p>Second, in the supplied form, fill in the fields. Each field
          has typical values that you will overtype. If you have seeded well,
          then the only form fields that will need adjustment are two of the three for which the labels are in 
          <strong><font color="red">red</font> font</strong>.
          </p>
          <p>Third, click the "submit" button if everything looks right. If not,
          start over by reloading the page.  </p>
          <p>
          <tt>schott DOT bee are eye eh en AT gee em ae eye el DOT com</tt></p>
        </td>
        <td valign="top">

          <!--div id="map" style="width: 900px; height: 700px"></div-->
          <div id="map" style="width: 700px; height: 500px"></div>
          <!--a href="/mapowner?place={{place}}">Add or delete pins on your map page now or later</a-->
          <!--a href="store.htm">Back to the tutorial page</a-->


        </td>
      </tr>
    </table>
            
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>


    <script type="text/javascript">
      //<![CDATA[

    /*This script is based on the work of Mike Williams' example_store.htm
      who has been extremely helpful and whose great tutorial are at the link
      http://www.econym.demon.co.uk/googlemaps/ 
    */

    if (GBrowserIsCompatible()) {

      // == Display the map, with some controls and set the initial location 
      var place_name = '{{place|addslashes}}';
      var myEventListener;
      var zoom = '{{map_zoom}}';
      var map_lat       = '{{ center_lat}}';
      var map_lng       = '{{ center_lng}}';
      var pin_lat       = '{{ marker_lat}}';
      var pin_lng       = '{{ marker_lng}}';
      var pin_title     = '{{ place }}';

      if ('{{map_zoom}}'   == 'None'){zoom = 2;}
      if ('{{center_lat}}' == 'None'){map_lat = 24.21;}
      if ('{{center_lng}}' == 'None'){map_lng =-41.48;}
      if ('{{marker_lat}}' == 'None'){pin_lat = 24.21;}
      if ('{{marker_lng}}' == 'None'){pin_lng =-41.48;}
      zoom = parseFloat(zoom);
      var start = new GLatLng(parseFloat(map_lat),parseFloat(map_lng));
      var startpin = new GLatLng(parseFloat(pin_lat),parseFloat(pin_lng));
      var map = new GMap2(document.getElementById("map"),{draggableCursor:"default"});
      map.addControl(new GLargeMapControl());
      map.setCenter(start , zoom);

      function createMarker(point){
      var markerOptions = {title:"Drag and zoom the map and reposition me, before clicking on me", draggable:true};
      var marker = new GMarker(point,markerOptions);
      map.addOverlay(marker);
      return marker;
      }
    
      function whenReady( id, callback ) {
        var interval = setInterval( function() {
            var element = document.getElementById( id );
            if( element ) {
            clearInterval( interval );
            callback( element );
            }
            }, 20 );
      }

      // function process(form,place_name,user_name) {
      function process(form) {
        // == populate map data
        var people = escape(form.people.value);
        var contact = escape(form.contact.value);
        var prevgroup = escape(form.prevgroup.value);
        var nextgroup = escape(form.nextgroup.value);
        var acrossgroup = escape(form.acrossgroup.value);
        var pintext = escape(form.pintext.value);
        var activity = escape(form.activity.value);
        var moreinfo = escape(form.moreinfo.value);
        var categories = escape(form.categories.value);
        var colors = escape(form.colors.value);
        var activityLog = escape(form.activityLog.value);
        var moreinfoLog = escape(form.moreinfoLog.value);
        var categoriesLog = escape(form.categoriesLog.value);
        var colorsLog = escape(form.colorsLog.value);
        var center_lat = parseFloat(map.getCenter().lat());
        var center_lng = parseFloat(map.getCenter().lng());
        var zoom = String(map.getZoom());
        var marker_lat = parseFloat(marker.getPoint().lat());
        var marker_lng = parseFloat(marker.getPoint().lng());
        var url = "/add_nextmap?place="+place_name+"&origplace="+'{{origplace}}'+"&center_lat="+center_lat+"&center_lng="+center_lng+"&zoom="+zoom+"&people="+people+"&contact="+contact+"&moreinfo="+moreinfo+"&moreinfoLog="+'{{moreinfoLog}}'+"&prevgroup="+prevgroup+"&nextgroup="+nextgroup+"&acrossgroup="+acrossgroup+"&pintext="+pintext+"&activity="+activity+"&categories="+categories+"&colors="+colors+"&activityLog="+'{{activityLog}}'+"&categoriesLog="+categoriesLog+"&colorsLog="+colorsLog+"&marker_lat="+marker_lat+"&marker_lng="+marker_lng;
        // GLog.write("About to send "+url+ " to the server"); 

        // ===== send the data to the server
        GDownloadUrl(url, function(doc) { 
            });  

        alert("Your map has been created or revised. You and your group can use it at the address (URL) in your browser. Be sure to BOOKMARK this page and distribute the URL to your group.");
        return true;
      }


      // extract colors from template_value color
      var colors = '';
      {% for s in color%}
      colors = colors + '{{s}} ' ; 
      {% endfor %}
      if ('' == colors){colors = "ff0000 ffff00"};

      // extract categories from template_value category
      var categories = '';
      {% for s in category%}
      categories = categories + '{{s}} ' ; 
      {% endfor %}
      if ('' == categories){categories = "typical special"};

      // extract colors from template_value colorLog
      var colorsLog = '';
      {% for s in colorLog%}
      colorsLog = colorsLog + '{{s}} ' ; 
      {% endfor %}
      if ('' == colorsLog){colorsLog = "ff0000 ffff00"};

      // extract categories from template_value categoryLog
      var categoriesLog = '';
      {% for s in categoryLog%}
      categoriesLog = categoriesLog + '{{s}} ' ; 
      {% endfor %}
      if ('' == categoriesLog){categoriesLog = "typical special"};


      var iwform = 'Enter your <strong>map\'s</strong> information here:<br>'
        + '<form onsubmit="process(this); return false" action="#">'
        + 'Group Name or Initials: '
        + '<br />'
        + '<strong>' + place_name + '</strong>'
        + '<br />'
        + 'People'
        + '  <input type="text" name="people" value="{{ people|default:"do-gooders"}}" id="idinput" size="31" maxlength="31"/>'
        + '<br />'
        + 'Activity'
        + '  <input type="text" name="activity" value="{{ activity|default:"live"}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Map pin text field description'
        + '  <input type="text" name="pintext" value="{{ pintext|default:"Name"}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Contact'
        + '  <input type="text" name="contact" value="{{contact|default:"schott DOT bee are eye eh en AT gee em ae eye el DOT com"}}" size="31" maxlength="91"/>'
        + '<br />'
        + 'Pin categories (space separated)'
        + '  <input type="textarea" name="categories" value="' +categories+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'Pin colors (space separated)'
        + '  <input type="textarea" name="colors" value="' +colors+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'More information'
        + '  <input type="textarea" name="moreinfo" value="{{ moreinfo|default:"This is important"}}" size="31" maxlength="291"/>'
        + '<br />'
        + '<br />'
        + '<font color="Red">Next group name'
        + '  <input type="text" name="nextgroup" value="{{nextgroup}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Previous group name'
        + '  <input type="text" name="prevgroup" value="{{prevgroup}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Across median group name'
        + '  <input type="text" name="acrossgroup" value="{{acrossgroup}}" size="31" maxlength="31"/><\/font>'
        + '<br />'
        + '<br />'
        + 'Enter your <strong>logpage\'s</strong> information below here:<br>'
        + '<br />'
        + 'Activity'
        + '  <input type="text" name="activityLog" value="{{ activityLog|default:"live"}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Log categories (space separated)'
        + '  <input type="textarea" name="categoriesLog" value="' +categoriesLog+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'Pin colors (space separated)'
        + '  <input type="textarea" name="colorsLog" value="' +colorsLog+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'More information'
        + '  <input type="textarea" name="moreinfoLog" value="{{ moreinfoLog|default:"This is important"}}" size="31" maxlength="291"/>'
        + '<br />'

        + '  <input type="hidden" name="place_name"/>'
        + '  <input type="hidden" name="center_lat"/>'
        + '  <input type="hidden" name="center_lng"/>'
        + '  <input type="hidden" name="zoom"/>'
        + '  <input type="hidden" name="marker_lat"/>'
        + '  <input type="hidden" name="marker_lng"/>'          
        + '  <input type="submit" value="Submit" />'
        + '<\/form>';

      var marker = createMarker(startpin);
      document.write(iwform);

        // display a warning if the browser was not compatible
      } else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }

      // This Javascript is based on code provided by the
      // Blackpool Community Church Javascript Team
      // http://www.commchurch.freeserve.co.uk/   
      // http://econym.googlepages.com/index.htm


      //]]>
    </script>
  </body>

</html>
